$(function () {
    // js功能1：实现轮播图功能
    var img_index = $(".mi_img img").length - 1 //获取 图片的张数 -1 拿来当下标索引使用
    // 页面加载时启动定时器   全局定时器 timer
    var timer3 = setInterval(function() {
        $(".next_page").trigger("click");
    }, 4000);
    // 点击下一页按钮 触发方法 next_cut_slideshow
    $(".next_page").click(function() {
        img_index--;
        if (img_index < 0) {
            img_index = 4
        }
        next_cut_slideshow(img_index);
    });
    // 点击上一页按钮 触发方法 next_cut_slideshow
    $(".top_page").click(function() {
        img_index++;
        if (img_index > 4) {
            img_index = 0
        }
        next_cut_slideshow(img_index);
    });
    // 点击指示器按钮 触发方法 next_cut_slideshow
    $(".mi_slideshow_indicator>ul>li").click(function() {
        img_index = $(this).index();
        next_cut_slideshow(img_index);
    });
    // 定义轮播图切换方法
    // 点击后的切换方法
    function next_cut_slideshow(img_index) {
        $(".mi_img img:eq(" + img_index + ")").fadeIn().siblings().fadeOut();
        $(".mi_slideshow_indicator>ul>li:eq(" + img_index + ")").css({
            "background-color": "#cecece"
        }).siblings().css({
            "background-color": "#6d6d6d"
        });
    }
    //清除定时器方法
    $(".mi_slideshow").hover(function() {
        clearInterval(timer3);
    }, function() {
        timer3 = setInterval(function() {
            $(".next_page").trigger("click");
        }, 4000);
    });



    // js功能2：实现侧边选项卡的悬浮功能
    $(".mi_Tab>ul>li").hover(function () {
        var index_Tab = $(this).index();
        $(".concrete_content").hide()
        $(".concrete_content").eq(index_Tab).show()
    },function () {
        $(".concrete_content").hide()
    })



    // js功能3：当经过顶部购物车盒子时 , 隐藏盒子下拉出来
    $(".topbar-cart").mouseenter(function () {
        $(".empty").stop().slideDown(300);
    });
    $(".topbar-cart").mouseleave(function () {
        $(".empty").stop().slideUp(300);
    });



    // js功能4：实现搜索框每隔5秒改变value值
    var values = ['双口电磁炉' , '家电' , '出行' , '电视' , '个护' , '耳机' , '小米10' , 'Redmi 10X 5G' ,
    'Redmi Note9 Pro' , 'Redmi K30 至尊纪念版']
    var number = 1;
    var timer1 = window.setInterval(function () {
        if(number > 9){
            number = 0;
        }
        console.log(number)
        $(".search-text").val(values[number]);
        number++
    },5000)

    // 当搜索框获得焦点时 , 清除value计时器 , 开启placeholder计时器
    // var timer2
    // $(".search-text").focus(function () {
    //     clearInterval(timer1);
    //     $(this).val('')
    //     // $(this).attr('placeholder' , values[number])
    //     timer2 = window.setInterval(function () {
    //         if(number > 9){
    //             number = 0;
    //         }
    //         console.log(number)
    //         $(".search-text").attr('placeholder',values[number]);
    //         number++
    //     },5000)
    // })

    // 当搜索框失去焦点时 , 重新开启value计时器
    // $(".search-text").blur(function () {
    //     clearInterval(timer2)
    //     window.setInterval(function () {
    //         if(number > 9){
    //             number = 0;
    //         }
    //         console.log(number)
    //         $(".search-text").val(values[number]);
    //         number++
    //     },5000)
    // })



    // js功能5：当搜索框获得焦点时 , 关键词下拉列表出现
    $(".search-text").focus(function () {
        $(this).css("border-color" , "#ff6700").siblings(".search-btn")
            .css("border-color" , "#ff6700").siblings(".keyword-list").show();
    });
    $(".search-text").blur(function () {
        $(this).css("border-color" , "#e0e0e0").siblings(".search-btn")
            .css("border-color" , "#e0e0e0").siblings(".keyword-list").hide();
    })



    // js功能6：当鼠标经过头部产品名称的时候 , 相对应索引号的产品列表出现
    var index;
    $(".header-nav li").hover(function() {
        index = $(this).index();
        $(".header-slider-menu").eq(index).stop().show()
    },function () {
        $(".header-slider-menu").eq(index).stop().hide()
    });



    // js功能7：实现 “小米闪购” 模块的动画轮播效果
    var flag = true;
    var flag1 = true;
    var num = 1;
    $(".next-btn").click(function () {
        if(flag == true){
            $(".product-content ul").stop().animate({
                left : -728
            } , 1000)
            flag = false;
            num = 2;
        }

        else if(flag == false){
            $(".product-content ul").stop().animate({
                left : -1226
            } , 1000)
            flag1 = true;
            num = 0;
        }
    })
    $(".prev-btn").click(function () {
        if(flag1 == true){
            $(".product-content ul").stop().animate({
                left : -728
            } , 1000)
            flag1 = false;
            flag = false;
            num = 2;
        }
        else if(flag1 == false){
            $(".product-content ul").stop().animate({
                left : 244
            } , 1000)
            flag = true
            num = 1;
        }
    })
    window.setInterval(function () {
        if(num == 1){
            $(".product-content ul").stop().animate({
                left : -728
            } , 1000);
            num = 2;
            flag = false;
            flag1 = false;
        }
        else if(num == 2){
            $(".product-content ul").stop().animate({
                left : -1226
            } , 1000);
            num = 0;
            flag1 = true;
        }
        else if(num == 0){
            $(".product-content ul").stop().animate({
                left : 244
            } , 1000)
            num = 1;
            flag = true;
        }
    },5000);



    // js功能8：实现倒计时效果
    var inputTime = +new Date('2020-12-30 02:10:00');
    countdown();
    var timer = setInterval(countdown , 1000);
    function countdown() {
        var nowTime = +new Date();
        var times = (inputTime - nowTime) / 1000;
        if(times >= 0){
            var h = parseInt(times / 60 / 60);
            h = h < 10 ? '0' + h : h;
            $(".hour").html(h);
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            $(".minute").html(m);
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            $(".second").html(s);
        }
        // 当时间到了 , 清除计时器
        else{
            clearInterval(timer);
            $(".countdown-desc").text("时间到")
        }
    }



    // js功能9：实现tab栏切换 , 由于有多个 , 因此把它封装为一个函数
    var index;
    function toggle(hover , child , target) {
        hover.mouseenter(function () {
            index = $(this).index();
            $(this).css({"color" : "#ff8500"}).siblings().css({"color" : "#424242"});
            $(this).children(child).show();
            $(this).siblings().children(child).hide()
            target.eq(index).show().siblings(target).hide();
        })
    }
    toggle($(".furniture .tab-list li") , $(".line") , $(".furniture .furniture-pro"))
    toggle($(".intelligence .tab-list li") , $(".line") , $(".intelligence .furniture-pro"))
    toggle($(".collocation .tab-list li") , $(".line") , $(".collocation .furniture-pro"))
    toggle($(".related-product .tab-list li") , $(".line") , $(".related-product .furniture-pro"))



    // js功能10：实现点击 “视频模块” 的li并出现相对应索引号的视频
    $(".play-btn").click(function () {
        var index = $(this).parents("li").index();
        console.log(index)
        $(".mi-popup").show().children(".mi-video").eq(index).show().siblings(".mi-video").hide()
    })
    $(".close_btn").click(function () {
        $(".mi-popup").hide()
    })



    // js功能11：实现鼠标经过侧边栏图标以及文字改变颜色
    $(".toolbar li").hover(function () {
        var index = $(this).index();
        $(".hover").eq(index).show().siblings().hide();
        $('.txt').eq(index).css("color" , "#ff6700")
    },function () {
        $(".hover").hide().siblings().show();
        $('.txt').css("color" , "#757575")
    })



    // js功能12：当页面被卷去高度大于或等于 “小米闪购” 模块距离顶部的距离时 , 返回顶部框出现
    var boxTop = $(".flash-Sale").offset().top;
    $(window).scroll(function () {
        if($(document).scrollTop() >= boxTop){
            $(".top").slideDown(200);
        }
        else{
            $(".top").slideUp(200);
        }
    })
    // 点击返回顶部框时 , 迅速回到顶部
    $(".top").click(function () {
        $("body , html").stop().animate({
            scrollTop : 0
        })
    })


    // js功能13：每隔4秒改变底部图片
    var frag = 1;
    setInterval(function () {
        if(frag === 1){
            $(".safe img").attr('src' , 'images/day01.png');
            frag = 2;
        }
        else if(frag === 2){
            $(".safe img").attr('src' , 'images/day02.png');
            frag = 1;
        }

    },4000)
});



// js功能14：如果电脑分辨率小于1440 , 侧边栏 toolbar_1440显示 , 反之
window.addEventListener("load" , function () {
    var toolbar_1920 = document.querySelector(".toolbar_1920");
    var toolbar_1440 = document.querySelector(".toolbar_1440");
    if(window.screen.width > 1440){
        toolbar_1920.style.display = "block";
        toolbar_1440.style.display = "none";
    }
    else if(window.screen.width <= 1440){
        toolbar_1920.style.display = "none";
        toolbar_1440.style.display = "block";
    }
})